﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>NIIT商城</title>
<link href="./css/slider.css" rel="stylesheet" type="text/css"/>
<link href="./css/common.css" rel="stylesheet" type="text/css"/>
<link href="./css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--header部分-->
<div th:replace="header.html"></div>

<!--页面主题部分-->
<div class="container index">
	<div class="span24">
		<div id="hotProduct" class="hotProduct clearfix">
			<div class="title">
				<strong>热门商品</strong>
			</div>
			<ul class="tabContent" style="display: block;">
				<li th:each="p : ${hotProducts}">
					<a target="_blank"><img th:src="${'http://localhost:8089/'+ p.image}" style="display: block;"></a>
				</li>
			</ul>
		</div>
	</div>
	<div class="span24">
		<div id="newProduct" class="newProduct clearfix">
			<div class="title">
				<strong>最新商品</strong>
				<a  target="_blank"></a>
			</div>
			 <ul class="tabContent" style="display: block;"></ul>
		</div>
	</div>
	<div class="span24">
		<div class="friendLink">
			<dl>
				<dt>新手指南</dt>
				<dd>
					<a  target="_blank">支付方式</a>
					|
				</dd>
				<dd>
					<a  target="_blank">配送方式</a>
					|
				</dd>
				<dd>
					<a  target="_blank">售后服务</a>
					|
				</dd>
				<dd>
					<a  target="_blank">购物帮助</a>
					|
				</dd>
				<dd>
					<a  target="_blank">礼品卡</a>
					|
				</dd>
				<dd>
					<a target="_blank">银联卡</a>
					|
				</dd>
				<dd class="more">
					<a >更多</a>
				</dd>
			</dl>
		</div>
	</div>
</div>
<div th:replace="footer.html"></div>
<script src="./js/jquery-1.8.3.js"></script>
<script>
	$(document).ready(function () { //文档就绪函数，代码在界面加载完成之后自动执行
		// 发出ajax请求，查询最新商品信息
		// 使用javaScirpt发出一个请求
		$.ajax({
			url:"getNewProducts",
			success:function (data) { //data将接受 json数组
				// js的方式循环显示第二个表
				for(d in data){
					$("#newProduct .tabContent").append('<li><a  target="_blank">' +
									'<img src="http://localhost:8089/'+data[d].image+'"'+' style="display: block;"></a></li>');
				}
			}
		})
	})
</script>
</body>
</html>